<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>GetProportion</title>
		<script src="js/echarts.min.js"></script>
		<script src="js/jquery-3.4.0.min.js"></script>

		<script>
			$(function() {
				//给搜索框注入点击事件
				$("#btnSelect").click(function() {
					var logtime = $("#txtLogtime").val();

					if (logtime.length == 0) {
						console.log("NO!!")
					} else {
						MyUser = {
							"beginPage": 0,
							"pageCount": 10,
							"logtime": logtime
						};
					}

					$.ajax({
						type: "put",
						url: "http://localhost:2079/myuser/getProportion",
						contentType: "application/json;charset=utf-8",
						data: JSON.stringify(MyUser),
						dataType: "json",
						success: function(res) {
							console.log(res);

							if (res) {
								var item = {
									'name': "1~9点",
									"value": 0
								}
								var dat = [];
								dat.push(item);

								var item = {
									'name': "10~14点",
									"value": 0
								}
								dat.push(item);

								var item = {
									'name': "15~20点",
									"value": 0
								}
								dat.push(item);

								var item = {
									'name': "21~24点",
									"value": 0
								}
							}
							dat.push(item);

							console.log(dat);
							for (var i in res) {
								var st = res[i]["name"].slice(11);
								if (st >= 1 && st <= 9) {
									dat[0]['value']++;
								} else if (st >= 10 && st <= 14) {
									dat[1]['value']++;
								} else if (st >= 15 && st <= 20) {
									dat[2]['value']++;
								} else {
									dat[3]['value']++;
								}
							}
							//数据加载之前剋现实的内容
							myEchar.showLoading();

							myEchar.setOption({
								title: {
									text: '用户单日访问分析',
									left: 'center'
								},
								tooltip: {
									trigger: 'item'
								},
								legend: {
									orient: 'vertical',
									left: 'left'
								},
								series: [{
									name: '访问量',
									type: 'pie',
									radius: '50%',
									data: dat,
									emphasis: {
										itemStyle: {
											shadowBlur: 10,
											shadowOffsetX: 0,
											shadowColor: 'rgba(0, 0, 0, 0.5)'
										}
									},
								}]
							});
						},
						error: function(errorMsg) {
							alert("用户状态分析数据加载失败");
							myEchar.hideLoading();
						}
					});
				})
			})
		</script>
	</head>

	<body>

		<!--查询区域-->
		<div class="input-group">
			&nbsp;&nbsp;&nbsp;&nbsp;操作时间区间：
			<!-- 			<input type="text" id="txtLogtimemin" /> &nbsp;&nbsp; -->
			<!-- 			<input type="text" id="txtLogtimemax" /> -->
			<input type="text" id="txtLogtime" />
			<button type="button" id="btnSelect" class="btn btn-default">Search</button>
		</div>

		<br />

		<div id="main" style="width: 1200px;height: 500px;"></div>
		<script type="text/javascript">
			//基于dom初始化Echarts
			var myEchar = echarts.init(document.getElementById('main'));

			//数据加载之前显示现实的内容
			myEchar.showLoading();

			//定义要查询的条件
			MyUser = {
				"beginPage": 0,
				"pageCount": 10
			}

			$.ajax({
				type: "put",
				url: "http://localhost:2079/myuser/getProportion",
				contentType: "application/json;charset=utf-8",
				data: JSON.stringify(MyUser),
				dataType: "json",
				success: function(res) {
					console.log(res);

					if (res) {
						var item = {
							'name': "1~9点",
							"value": 0
						}
						var dat = [];
						dat.push(item);

						var item = {
							'name': "10~14点",
							"value": 0
						}
						dat.push(item);

						var item = {
							'name': "15~20点",
							"value": 0
						}
						dat.push(item);

						var item = {
							'name': "21~24点",
							"value": 0
						}
					}
					dat.push(item);

					console.log(dat);
					for (var i in res) {
						var st = res[i]["name"].slice(11);
						if (st >= 1 && st <= 9) {
							dat[0]['value']++;
						} else if (st >= 10 && st <= 14) {
							dat[1]['value']++;
						} else if (st >= 15 && st <= 20) {
							dat[2]['value']++;
						} else {
							dat[3]['value']++;
						}
					}
					//数据加载之前剋现实的内容
					myEchar.showLoading();

					myEchar.setOption({
						title: {
							text: '用户单日访问分析',
							left: 'center'
						},
						tooltip: {
							trigger: 'item'
						},
						legend: {
							orient: 'vertical',
							left: 'left'
						},
						series: [{
							name: '访问量',
							type: 'pie',
							radius: '50%',
							data: dat,
							emphasis: {
								itemStyle: {
									shadowBlur: 10,
									shadowOffsetX: 0,
									shadowColor: 'rgba(0, 0, 0, 0.5)'
								}
							},
						}]
					});
				},
				error: function(errorMsg) {
					alert("用户状态分析数据加载失败");
					myEchar.hideLoading();
				}
			});
		</script>

	</body>
</html>
